<div ng-show="spy.mode.name === 'setalarm'" class="fill visualize-spy-nav">
  <div class="form-group">
  	<a class="btn btn-default ng-binding ng-scope" ng-click="makeAlarm()" href="javascript:;">Save Watcher</a>
  	<a class="btn btn-default ng-binding ng-scope" href="/app/kaae">Save + Edit Watcher in KaaE</a>
	<p class="hintbox">
		Configure the new Watcher preferences before sending to KaaE for processing and scheduling.
	</p>

  </div>

  <div class="form-group" style="margin-left:10px;width:30%;float:left;">
    <label for="visTitle">Watcher ID:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" name="watcherTitle" ng-model="watcher_id" required="">
    <label for="visTitle">Watcher Repeat Interval:</label>
    <select name="watcherInterval" 
		ng-change="makeAlarm()" 
		ng-options="option.value as option.name for option in intervals" 
		class="form-control ng-pristine ng-valid ng-valid-required ng-touched" 
		ng-model="watcher_interval">
    </select>
    <label for="visTitle">Watcher Query Range:</label>
    <select name="watcherRange" 
		ng-change="makeAlarm()" 
		ng-options="option.value as option.name for option in ranges" 
		class="form-control ng-pristine ng-valid ng-valid-required ng-touched" 
		ng-model="watcher_range">
    </select>
  </div>

  <div class="form-group" style="width:30%;float:left;margin-left:20px;">
    <label for="visTitle">Watcher Indices:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" name="watcherIndices" ng-model="indices" required="">
    <label for="visTitle">Watcher Script:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" name="watcherScript" ng-model="watcher_script" required="">

    <label for="visTitle">Watcher Script - Available Keys:</label>
    <select name="watcherHints" 
		ng-options="key as key for (key , value) in resKeys" 
		class="form-control ng-pristine ng-valid ng-valid-required ng-touched" 
		ng-model="watcher_hints">
    </select>

  </div>

  <div class="form-group" style="width:30%;float:left;margin-left:20px;">
    <label for="visTitle">Email To:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" ng-model="watcher_email_to" required="">
    <label for="visTitle">Email Subject:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" ng-model="watcher_email_subj" required="">
    <label for="visTitle">Email Body:</label>
    <input ng-change="makeAlarm()" class="form-control ng-pristine ng-valid ng-touched" input-focus="select" type="text" ng-model="watcher_email_body" required="">
  </div>

  <div style="clear:both;"></div>

  <div class="form-group">
	  <br/>
	  <pre>{{ alarm | json }}</pre>
  </div>
</div>
